<template>
	<view class="skeleton-container">
		<!-- 页面标题骨架 -->
		<view class="skeleton-header">
			<view class="skeleton-line title"></view>
			<view class="skeleton-line subtitle"></view>
		</view>
		
		<!-- 筛选工具栏骨架 -->
		<view class="skeleton-toolbar">
			<view class="skeleton-box input"></view>
			<view class="skeleton-box button"></view>
			<view class="skeleton-box button"></view>
			<view class="skeleton-box button small"></view>
		</view>
		
		<!-- 内容列表骨架 -->
		<view class="skeleton-content">
			<view 
				v-for="item in skeletonItems" 
				:key="item" 
				class="skeleton-item"
				:style="{ animationDelay: item * 100 + 'ms' }"
			>
				<view class="skeleton-item-header">
					<view class="skeleton-circle"></view>
					<view class="skeleton-info">
						<view class="skeleton-line name"></view>
						<view class="skeleton-line meta"></view>
					</view>
					<view class="skeleton-badge"></view>
				</view>
				<view class="skeleton-item-content">
					<view class="skeleton-line content-line"></view>
					<view class="skeleton-line content-line short"></view>
				</view>
				<view class="skeleton-item-actions">
					<view class="skeleton-button" v-for="btn in 3" :key="btn"></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'PageSkeleton',
	props: {
		itemCount: {
			type: Number,
			default: 5
		}
	},
	computed: {
		skeletonItems() {
			return Array.from({ length: this.itemCount }, (_, i) => i)
		}
	}
}
</script>

<style scoped>
.skeleton-container {
	padding: 24rpx;
	background: #fff;
	border-radius: 16rpx;
	margin: 24rpx;
}

/* 骨架屏基础动画 */
@keyframes skeleton-loading {
	0% {
		background-position: -200% 0;
	}
	100% {
		background-position: 200% 0;
	}
}

/* 页面标题骨架 */
.skeleton-header {
	margin-bottom: 40rpx;
	padding-bottom: 24rpx;
	border-bottom: 1rpx solid #f5f5f5;
}

.skeleton-line {
	background: linear-gradient(90deg, 
		#f0f0f0 25%, 
		#e0e0e0 50%, 
		#f0f0f0 75%
	);
	background-size: 200% 100%;
	animation: skeleton-loading 1.5s infinite;
	height: 32rpx;
	border-radius: 6rpx;
	margin-bottom: 16rpx;
}

.skeleton-line.title {
	width: 200rpx;
	height: 40rpx;
}

.skeleton-line.subtitle {
	width: 300rpx;
	height: 28rpx;
	opacity: 0.7;
}

/* 工具栏骨架 */
.skeleton-toolbar {
	display: flex;
	gap: 24rpx;
	margin-bottom: 32rpx;
	align-items: center;
}

.skeleton-box {
	background: linear-gradient(90deg, 
		#f0f0f0 25%, 
		#e0e0e0 50%, 
		#f0f0f0 75%
	);
	background-size: 200% 100%;
	animation: skeleton-loading 1.5s infinite;
	border-radius: 8rpx;
}

.skeleton-box.input {
	width: 300rpx;
	height: 64rpx;
}

.skeleton-box.button {
	width: 120rpx;
	height: 64rpx;
}

.skeleton-box.button.small {
	width: 80rpx;
}

/* 内容列表骨架 */
.skeleton-content {
	display: flex;
	flex-direction: column;
	gap: 24rpx;
}

.skeleton-item {
	background: #fff;
	border: 1rpx solid #f0f0f0;
	border-radius: 12rpx;
	padding: 32rpx;
	animation: skeleton-fade-in 0.6s ease-out forwards;
	opacity: 0;
	transform: translateY(20rpx);
}

@keyframes skeleton-fade-in {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.skeleton-item-header {
	display: flex;
	align-items: center;
	gap: 24rpx;
	margin-bottom: 24rpx;
}

.skeleton-circle {
	background: linear-gradient(90deg, 
		#f0f0f0 25%, 
		#e0e0e0 50%, 
		#f0f0f0 75%
	);
	background-size: 200% 100%;
	animation: skeleton-loading 1.5s infinite;
	width: 80rpx;
	height: 80rpx;
	border-radius: 50%;
	flex-shrink: 0;
}

.skeleton-info {
	flex: 1;
}

.skeleton-line.name {
	width: 150rpx;
	height: 28rpx;
}

.skeleton-line.meta {
	width: 200rpx;
	height: 24rpx;
	opacity: 0.6;
}

.skeleton-badge {
	background: linear-gradient(90deg, 
		#f0f0f0 25%, 
		#e0e0e0 50%, 
		#f0f0f0 75%
	);
	background-size: 200% 100%;
	animation: skeleton-loading 1.5s infinite;
	width: 100rpx;
	height: 40rpx;
	border-radius: 20rpx;
}

.skeleton-item-content {
	margin-bottom: 24rpx;
}

.skeleton-line.content-line {
	height: 28rpx;
	margin-bottom: 12rpx;
}

.skeleton-line.content-line:last-child {
	margin-bottom: 0;
}

.skeleton-line.short {
	width: 60%;
}

.skeleton-item-actions {
	display: flex;
	gap: 16rpx;
}

.skeleton-button {
	background: linear-gradient(90deg, 
		#f0f0f0 25%, 
		#e0e0e0 50%, 
		#f0f0f0 75%
	);
	background-size: 200% 100%;
	animation: skeleton-loading 1.5s infinite;
	width: 120rpx;
	height: 56rpx;
	border-radius: 8rpx;
}

/* 响应式设计 */
@media (max-width: 900px) {
	.skeleton-container {
		padding: 20rpx;
		margin: 20rpx;
	}
	
	.skeleton-toolbar {
		flex-wrap: wrap;
		gap: 16rpx;
	}
	
	.skeleton-box.input {
		width: 100%;
	}
	
	.skeleton-item {
		padding: 24rpx;
	}
	
	.skeleton-item-header {
		gap: 16rpx;
	}
	
	.skeleton-circle {
		width: 60rpx;
		height: 60rpx;
	}
}
</style>
